<include file="public:headtop" />
<style>
    .op-box{
        float:left;width:100%;margin-top:20px;
    }

    .op-box div{
        display:inline-block;width:49%;text-align:center
    }
    .op-box div img{
        width:85%;
    }
    .op-box div.coupon{
        width:100%;
        text-align: right;
    }
    .op-box div.coupon img{padding:20px;}
    .layermcont{text-align: center}
    .cancel{
        font-size:10px;
        color:#ccc;
        float:right;
        font-style: italic;
    }
</style>
<div class="calendar" style='position:relative; width:100%;'>
    <div style='width:100%;height:100%' class="outer clearfix" id="calendarcontainer" cellspacing="10" ></div>
</div>
<input type="hidden" name="dates" id='dates'>
<div class="op-box">
    <div>
        <img action='cancel' src="/static/weixin/images/index/cancel_peisong.png" alt="">
    </div>
    <div>
        <img action='switch' src="/static/weixin/images/index/shunyan_btn.png">
    </div>
    <!-- <div class="coupon">
        
    </div> -->

    <div style="width:90%;margin:5%;text-align:left;font-family:'微软雅黑'">
        <img action='coupon' src="/static/weixin/images/index/coupon.png" alt="" style="width:20%;float:right;padding:5px">
        <p style="font-weight:bold;color:#333">早点日历小贴士：</p>
        <p style="color:#666;font-size:12px">1、成功接受到的早餐会按时间顺序排到早点日历上，默认周一至周五正常工作日；</p>
        <p style="color:#666;font-size:12px">2、如有节假日调休、临时出差、请假不在办公室的情况，早点日历有取消订单（提前一天）和顺延送餐的功能，取消的订单，会形成一份代金券，可用于下次订餐的代金券，顺延送餐是按天顺延，以上两种操作都是不可更改的，一定要谨慎操作哦！！</p>
        
    </div>
</div>

<link rel="stylesheet" href="/static/calendar/calendar.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="/static/calendar/Calendar.js"></script>
<script src="/static/calendar/fun.js"></script>
<script>
var currentMonth = new Date().getMonth() + 1;
var days = eval(<php>echo $json_days</php>)
days = days == null ? {} : days;
var para={'c':'calendarcontainer',
        'y':2015,
        'm':currentMonth,
        'a':{
       'd1':'2014-01-01',//最早时间
       'd2':'2018-05-05'//最晚时间
    },
    'f':0,//显示双日历用1，单日历用0
    'clickfu':function(to){
        if(!to.id){
            return;
        }
        var d = new Date();
        var today = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();

        date = to.id.replace(/-/g,"")
        today = today.replace(/-/g,"")
        if(parseInt(date) < parseInt(today)){
            return false;
        }

        if(!$(to).find('em').hasClass('on')){
            layer.open({content: '今天还木有小伙伴给你送早点哦~', time: 1});
            return;
        }

        var date = $('#dates').val()
        var arr = date.split(',');
        if(arr.indexOf(to.id) !== -1){
            arr.remove(to.id)
            $('#dates').val(arr.join(','))
            $("#" + to.id).removeClass('cover');
            return true;

        }else{
            $("#" + to.id).addClass('cover');
            var date = $('#dates').val()
            if(date){
                $('#dates').val(date + "," + to.id);
            }else{
                $('#dates').val(to.id);
            }
        }
        
    },
    'showFu':function(d){  //回调函数，d为要显示的当前日期，主要用于判断是否要在该日期的格子里显示出指定的内容，在日期格子里额外显示内容的函数,返回值必须为字符串，参数d为显示的日期对象（日期类型）
        m = d.getMonth()+1;
        if(m<10){
            m = "0" + m;
        }

        day = d.getDate() < 10 ? "0"+d.getDate() : d.getDate();
        var date = d.getFullYear() + "-" + m + '-' + day;
        if(days.hasOwnProperty(date) && days[date] == -1){
            return "<span class='cancel'>取消</span>";
        }else if(days.hasOwnProperty(date) && days[date] == -2){
            return "<span class='cancel'>顺延</span>";
        }else{
            return '';
        }
        
        
       }     
}
     
CreateCalendar(para,"para"); //参数前一个是对象，后一个是对象名称
loadDateStyle()
function loadDateStyle(){
    $("#calendarcontainer td").each(function(){
        if(days == null){
            return false;
        }
        if(this.id){
            data_arr = this.id.split('-');
            if(data_arr[1] < 10){
                data_arr[1] = "0" + data_arr[1];
            }
            data_arr[2] = data_arr[2] < 10 ? "0"+data_arr[2] : data_arr[2];
            date = data_arr.join("-");
            if(days.hasOwnProperty(date) && days[date] > -1){
                $(this).find('em').addClass('on')
            }else{
                $(this).find('em').addClass('off')
            }
        }
    });
}


$(".op-box img").click(function(){
    var dates = $('#dates').val();
    var action = $(this).attr('action');
    if(action == 'coupon'){
        window.location.href = '{:u("order/main")}';
        return;
    }

    if(!dates){
        layer.open({content: '请选择日期', time: 1});
        return false;
    } 
    
    //回调函数，to为点击对象，点击日期是调用的函数,参数to为点击的日期的节点对象，可以把用户选定的日期通过此函数存入服务端或cookies，具体请自行编写
        layer.open({
            content: '您确定执行此操作吗？',
            btn: ['确定', '取消'],
            shadeClose: false,
            yes: function(){
                $.post("{:u('user/change_date')}",{dates:dates,action:action},function(res){
                    if(res){
                        window.location = window.location.href;
                    }
                    
                },'json')
                //layer.open({content: '你点了确认', time: 1});
            }, no: function(){

            }
        });
})

</script>   
</body>
</html>